<template>
  <el-dialog title= '上传图片' v-model="visible">
    <el-form label-width="100px" class="good-form">
      <el-form-item required label="单张图片上传" label-width="150px">
                  <el-upload
                       ref="upload"
                       list-type="picture-card"
                       accept="jpg,jpeg,png"
                      :action="uploadImgsServer"                                  
                      :http-request="UploadFileMed"                      
                      :auto-upload="false"
                      :limit="1"
                      >
                      <i class="el-icon-plus"></i>
                    </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">上 传</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, ref, toRefs } from 'vue'
import {uploadFile} from '@/utils/axios'
import { ElMessage } from 'element-plus'
import { uploadImgsServer, } from '@/utils'
import { inject } from 'vue'
export default {
  name: 'DialogAddImg',//上传图片

  props: {
     parent_id: Number,
     reload: Function
  },
  setup(props) {
    const upload = ref(null)
    const $filters = inject('$filters')
    const state = reactive({
      visible: false,
      uploadImgsServer,
      goodsImg:'' 
      
    })
    // 开启弹窗
    const open = () => {
      state.visible = true
    }
    // 关闭弹窗
    const close = () => {
      state.visible = false
    }
     const UploadFileMed=(param)=>{//上传图片
       console.log(param)
      uploadFile(param.file,uploadImgsServer).then(res=>{
        console.log(res.data)
        if(res.data.data.length>0){
          res.data.data[0].url=$filters.prefix(res.data.data[0].imgUrl)
          state.goodsImg=res.data.data[0].url
        if (props.reload) props.reload(state.goodsImg,props.parent_id) // 添加成功后，更新自提点列表
          //ElMessage.success('图片上传成功')
        }
       })
    }
    const submitForm=()=>{
      upload.value.submit();//重新提交图片到服务器
      state.visible=false;
    }
    return {
      ...toRefs(state),
      upload,
      open,
      close,
      UploadFileMed,
      submitForm
    }
  }
}
</script>